<template>
	<view v-if="loginInfo">
		<uni-nav-bar :fixed="true" left-icon="back" title="账户设置" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-bg-white dfj-overflow-hide">
			<view class="dfj-bd-b-e5e dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-30" @click="uploadImg()">
				<view class="dfj-flex-1 dfj-t-333 dfj-f-28">头像</view>
				<view class="dfj-t-666 dfj-flex dfj-flex-ai-c">
					<image style="width: 80rpx;height: 80rpx;border-radius: 100%;" :src="loginInfo.userInfo.headIcon || '/static/img/login.png'"/>
					<text class="dfj-icon icon-arrow-right"></text>
				</view>
			</view>
			<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-30" @click="nameOpen">
				<view class="dfj-flex-1 dfj-t-333 dfj-f-28">昵称</view>
				<view class="dfj-t-666"><text class="dfj-mg-l-30 dfj-t-999">{{ loginInfo.userInfo.userName }}</text><text class="dfj-icon icon-arrow-right"></text></view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white dfj-pd-lr-50 dfj-overflow-hide">
				<view class="dfj-pd-tb-20 dfj-flex dfj-flex-ai-c">
					<view class="dfj-flex-1 dfj-t-333 dfj-f-30">修改昵称</view>
					<view class="dfj-t-base" @click="saveName()">保存</view>
				</view>
				<view class="dfj-mg-b-50 dfj-mg-t-20 dfj-bd-e5e">
					<input type="text" v-model="userName" style="width: 100%;" class="dfj-pd-20" placeholder="请输入您的昵称,用户名必须为3-8个字符" maxlength="8"/>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginInfo: '',
				userName: ''
			}
		},
		onShow() {
			this.getUserInFo()
		},
		methods:{
			leftBack() {
				uni.navigateBack();
			},
			getUserInFo() {
				this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
			},
			nameOpen(){
			    this.$refs.popup.open()
			},
			saveName() {
				this.$http({
					url: '/userOpt/modifyUserName',
					data: {
						userName: this.userName
					}
				}).then(res=> {
					if(res.flag){
						this.$refs.popup.close()
						this.loginInfo.userInfo.userName = this.userName
						localStorage.setItem('loginInfo', JSON.stringify(this.loginInfo))
						this.getUserInFo();
					}
				})
			},
			uploadImg() {
				uni.chooseImage({
				    success: (chooseImageRes) => {
						//console.log(chooseImageRes)
				        const tempFiles = chooseImageRes.tempFiles[0];
						
						uni.uploadFile({
							url: '/shopStreet/userOpt/uploadZImg',
							file: tempFiles,
							name: 'fileName',
							header: {
								'ssToken': this.loginInfo.token
							},
							success:(res)=>{
								let data = JSON.parse(res.data)
								if(!data.flag){
									uni.showToast({
										title: data.msg,
										icon: 'none'
									})
									return false;
								}
								this.loginInfo.userInfo.headIcon = data.data;
								localStorage.setItem('loginInfo', JSON.stringify(this.loginInfo))
								this.getUserInFo();
							},
							fail:(err)=>{
								console.log("失败")
								console.log(err)
							}
						})
						
						
				    }
				});
			}
		}
	}
</script>

<style>
</style>
